import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { Platform, TouchableOpacity, StyleSheet, Animated, View, Image ,Dimensions,TouchableHighlight } from 'react-native'

import Color from '../../config/theme/standard/color';
import fontSize from '../../config/theme/standard/fonts';
import Label from '../label';

export default class Message extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isShow: false,
            opacityValue: new Animated.Value(0),
        }
    }

    _show = ()=> {
        this.setState({
            isShow: true,
        });
        Animated.timing(
            this.state.opacityValue,
            {
                toValue: 1,
                duration: 100,
            }
        ).start(() => {
            this.isShow = true;
            this._closeDelay();
        });
    };

    _closeDelay = ()=> {
        let delay = this.props.duration;
        if (!this.isShow && !this.state.isShow) return;
        this.timer && clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            Animated.timing(
                this.state.opacityValue,
                {
                    toValue: 0,
                    duration: 100,
                }
            ).start(() => {
                this.setState({
                    isShow: false,
                });
                this.isShow = false;
            });
        }, delay);
    };

    _close = ()=> {
        if (!this.isShow && !this.state.isShow) return;
        Animated.timing(
            this.state.opacityValue,
                {
                    toValue: 0,
                    duration: 100,
                }
            ).start(() => {
                this.setState({
                    isShow: false,
                });
                this.isShow = false;
            });
    };

    _onPress(){
        if(typeof this.props.onPress ==  'function'){
            this.props.onPress();
        }
        this._close();
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }

    render() {
        const showClearIcon = this.props;
        const clearContainerStyles = [styles.clearContainer];
        const clearImageStyles = [styles.clearImage]
        let text;
        let height =Dimensions.get('window').height;
        text = this.props.text.length > 14 ? this.props.text.slice(0, 14) + '...': this.props.text;

        let clearIcon = null;
       
            clearIcon = (
                <TouchableHighlight
                    activeOpacity={0.7}
                    onPress ={()=>{
                        this._onPress();
                    }}
                    style={clearContainerStyles}
                    underlayColor='transparent'>
                    <Image
                        source={require('../../assets/icon_message_clear.png')}
                        style={clearImageStyles} />
                </TouchableHighlight>
            );    
        
        const message = this.state.isShow ?
            <View style={[styles.container, {top: this.props.position == 'top' ? this.props.positionValue : height - this.props.positionValue - 100}]}>
                <TouchableOpacity activeOpacity={1} style={styles.message} onPress={() => this._onPress()}>
                    <Animated.View style={[styles.content, { opacity: this.state.opacityValue,marginRight: this.props.showClearIcon ? 8 : 16 }]}>
                        <Image style={styles.image} source={this.props.source}/>
                        <Label text={text}  labelStyle={{color:Color.message.text,fontSize:fontSize.message.textFontSize}}/>
                        {this.props.showClearIcon ? clearIcon : null}
                    </Animated.View>
                </TouchableOpacity>
            </View> : null;

        return message ;

    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom:0,
        zIndex: 1000,
    },
    message: {
        backgroundColor: Color.white,
        borderRadius: 22,
        borderWidth: Platform.OS === 'ios' ? 0 : 1,
        borderColor: Color.border,
        shadowOffset: { width: 1, height: 2},
        shadowOpacity: 0.5,
        shadowRadius: 3,
        shadowColor: 'rgba(216,216,216,0.5)',
        //安卓中用于显示阴影
        elevation: 2
    },
    content: {
        height: 44,
        flexDirection: 'row',
        alignItems: 'center',
    },
    image: {
        width: 28,
        height: 28,
        marginLeft: 16,
        marginRight: 11,
    },
    clearContainer:{
        height: 44,
        width: 44,
        justifyContent:'center',
        alignItems:'center',
        marginLeft:10,
    },
    clearImage:{
        width:28,
        height:28,
        resizeMode: 'contain',
    }
    
});

Message.propTypes = {
    position: PropTypes.oneOf(['top', 'bottom',]),
    positionValue: PropTypes.number,
    duration: PropTypes.number,
    onPress: PropTypes.func,
    //右侧图标
    showClearIcon: PropTypes.bool,
    
};

Message.defaultProps = {
    position: 'center',
    positionValue: 30,
    duration: 3000,
    showClearIcon:false
};

